<template>
    <div>
        <div>
            <h1 style="font-size: 16px;color: black;">订单</h1>
        </div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userNum"
                    label="用户编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="submitTime"
                    label="确认时间"
                    width="230">
                <template v-slot="scope">
                    {{ formattedDate(scope.row.submitTime) }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="finishTime"
                    label="完成时间"
                    width="230">
                <template v-slot="scope">
                    {{ formattedDate(scope.row.finishTime) }}
                </template>
            </el-table-column>
            <el-table-column
                    style="font-size: 16px"
                    prop="orderPrice"
                    label="订单总价格"
                    width="160">
            </el-table-column>
            <el-table-column label="订单状态" prop="status" width="160">
            </el-table-column>
            <el-table-column label="操作" prop="orderId">
                <template v-slot="scope">
                                        <el-popconfirm  confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="yellow"
                                                       title="确认客人已支付？" @confirm="pay(scope.row.orderId)">
                                            <el-button style="margin-right: 3px" v-if="scope.row.status!= '已完成'" type="primary" slot="reference">订单完成</el-button>
                                        </el-popconfirm>
                    <el-button type="primary" @click="toOrderInfo(scope.row.orderId,scope.row.status)">查看订单详情
                    </el-button>

                    <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
                                   icon-color="red"
                                   title="确认删除此订单吗？" @confirm="del(scope.row.orderId)">
<!--                        <el-button type="danger" slot="reference">删除</el-button>-->
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 10px;">
            <el-pagination background :current-page="params.pageNum" :page-size="params.pageSize"
                           layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import request from "@/request";

export default {
    name: "Order",
    data() {
        return {
            state: this.$route.query.state,
            total: 0,
            tableData: [],
            params: {
                pageNum: 1,
                pageSize: 8,

            },

        }
    },
    mounted() {
        this.load()
    },
    methods: {
        load() {
            request.get('/order/all', {
                params: this.params
            }).then(res => {
                console.log(res)
                if (res.code === "200") {
                    this.total = res.data.total;
                    this.tableData = res.data.list;

                }
            })
        },
        handleCurrentChange(pageNum) {
            this.params.pageNum = pageNum;
            this.load()
        },
        formattedDate(dateStr) {
            if (!dateStr) {
                return null
            }
            const date = new Date(dateStr);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            return `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`;
        },
        del(orderId) {
            request.delete('/order/delete' + orderId).then(res => {
                if (res.code === '200') {
                    this.$notify.success('删除成功')
                    this.load();
                } else {
                    this.$notify.error(res.msg)
                }
            })

        },
        toOrderInfo(orderId, status) {
            console.log(this.state)
            if (this.state == 0){
                this.$router.push({path: '/receptionadmin/SYSOrderInfo', query: {param: orderId}});
            }else {
                this.$router.push({path: '/systemAdmin/SYSOrderInfo', query: {param: orderId}});
            }
        },
        pay(orderId) {
            request.put('/order/pay' + orderId).then(res => {


                if (res.code === '200') {
                    this.$notify.success('支付成功')
                    this.load();
                } else {
                    this.$notify.error(res.msg)
                }
            })
        },
    },


}
</script>

<style scoped>
.el-table {
    /*margin-left: 5vw;*/
}

/*#head  {*/
/*    height: 350px;*/
/*    !*background-image: url("../../assets/aboutbackground.png");*!*/
/*    !*background-size: cover;*!*/
/*    !*background-repeat: no-repeat;*!*/
/*}*/


</style>